<template>
	<view class="ht">
		<view class='unit-menu' v-for="(item,key) in menu" @tap="clickItem(key)">
			<!-- <i class='icon icon-name' v-html="item.icon"></i> -->
			<image :src="item.src" mode=""></image>
			<text class="unit-menu-name">{{item.name}}</text>
			<!-- <i class="icon icon-right">&#xe638;</i> -->
			<image class="jt"  src="../../static/image/userindex/jt02.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default{
		props:{menu : {}},
		data(){
			return {
			}
		},
		methods:{
			clickItem(key){
				this.$emit('click-menu',key)
			}
		}
	}
</script>

<style lang="scss">
	.ht {
		// padding:0 40upx;
		background-color: #FFFFFF;
	}
	.unit-menu{width: calc(100% - 60upx);
	position: relative;
	margin: 0 auto;
	// margin:0 40upx;
	font-size: 32upx;
	padding: 40upx 0 ;
	border-bottom: 2upx solid #f0f0f0;
	background-color: #FFFFFF;
	}
	.unit-menu:last-child {
		border-bottom: none;
	}
	.icon-right{float: right;color:#e2e2e2;}
	.icon-name{font-size: 38upx;color:#333;}
	.unit-menu-name{
		margin-left: 60upx; 
	font-size: 32upx;
	 color:#333333; padding-top: 6upx;}
	.unit-menu {
		image {
			position: absolute;
			width: 30upx;
			height: 30upx;
			top: 50%;
			transform: translateY(-50%);
			// vertical-align: middle;
			// margin-top: -4upx;
		}
	}
	.unit-menu .jt {
		width: 16upx;
		height: 32upx;
		position:absolute;
		right: 0;
	}
</style>
